import { createApp } from 'vue'
// import './style.css'
// 样式重置
import './assets/css/reset.css'
// 引入animate动画库
import 'animate.css'
// 引入时间总线
import mitt from 'mitt'
// 引入自定义时间总线
import { bus } from './Bus'
// 引入loading插件
import Loading from './components/28自定义插件loading/index'
// 全局插件
import MyPlugin from './install'
// 另一种注册插件方法
import { UsePlugin } from './install/other'
// 全局组件注册
import globalComponents from './globalComponents'
// 注册pinia
import { createPinia, PiniaPluginContext } from 'pinia'


import App from './App.vue'

const app = createApp(App)

// 事件总线
const Mit = mitt()
app.config.globalProperties.$bus = Mit
app.config.globalProperties.$custombus = bus
app.config.globalProperties.console = console

// 注册插件
app.use(Loading)

// 注册全局插件
app.use(MyPlugin)

// 注册全局组件
app.use(globalComponents)

// 注册pinia
const store = createPinia()
// 持久化
type PiniaOption = {
  key: string
}
const piniaPlugin = (option: PiniaOption) => {
  return (context: PiniaPluginContext) => {
    const { store } = context
    if (option.key !== store.$id) return
    store.$subscribe(() => {
      localStorage.setItem(`pinia-${option.key}`, JSON.stringify(toRaw(store.$state)))
    })
    const data = JSON.parse(localStorage.getItem(`pinia-${option.key}`) ?? '{}')
    return {
      ...data
    }
  }
}
store.use(piniaPlugin({ key: 'test' }))
// 注册
app.use(store)


// 另一种注册插件方法
// UsePlugin(app, Loading, 1, 2, 3)


app.mount('#app')


